<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Test Form Validation State</title>

		<style type="text/css">
			@import "../../../dojo/resources/dojo.css";
			@import "../css/dijitTests.css";
		</style>

		<!-- required: the default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/tundra/tundra.css">

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../dojo/dojo.js"
			djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>

		<!-- only needed for alternate theme testing: -->
		<script type="text/javascript" src="../_testCommon.js"></script>

		<script type="text/javascript">
			dojo.require("dijit.form.ValidationTextBox");
			dojo.require("dijit.form.DateTextBox");
			dojo.require("dijit.form.Button");
			dojo.require("dijit.form.FilteringSelect");
			dojo.require("dijit.form.Form");
			dojo.require("dojo.parser");	// scan page for widgets and instantiate them
		</script>
	</head>

	<body class="tundra">
		<h1 class="testTitle">Dijit Validation State</h1>
		<form dojoType="dijit.form.Form" id="form1" action="" name="example" method="">
			<table>
				<tr>
					<td><label for="name">Name:</label></td>
					<td><input id="name" dojoType="dijit.form.ValidationTextBox"
						required="true" name="name" /></td>
				</tr>
				<tr id="newRow" style="display: none;">
					<td><label for="lastName">Last Name:</label></td>
					<td><input id="lastName" /></td>
				</tr>
				<tr>
					<td><label for="birth">Birthdate (before 2006-12-31):</label></td>
					<td><div><input id="birth" dojoType="dijit.form.DateTextBox" value="2000-01-01"
						required="true" name="birth" constraints="{min:'1900-01-01', max:'2006-12-31'}" />
					<button onclick="dijit.byId('birth').attr('disabled',true);return false">Disable</button>
					<button onclick="dijit.byId('birth').attr('disabled',false);return false">Enable</button>
					<button onclick="dijit.byId('birth').reset();return false">Reset</button>
					</div></td>
				</tr>
				<tr>
					<td><label for="notes">Notes (optional)</label></td>
					<td><input id="notes" dojoType="dijit.form.TextBox"
						name="notes" /></td>
				</tr>
				<tr id="newRow2" style="display: none;">
					<td><label for="color">Favorite Color</label></td>
					<td><select id="color">
						<option value="red">Red</option>
						<option value="yellow">Yellow</option>
						<option value="blue">Blue</option>
					</select></td>
				</tr>
			</table>
			<button dojoType="dijit.form.Button">
				<script type="dojo/method" event="onClick">
					console.dir(dijit.byId("form1").attr('value'));
				</script>
				<script type="dojo/method" event="startup">
					var form = dijit.byId("form1");
					//  set initial state
					this.attr("disabled", !form.isValid());
					this.connect(form, "onValidStateChange", function(state){
							this.attr("disabled", !state);
					});
				</script>
				Submit
			</button>
			<button dojoType="dijit.form.Button">
				<script type="dojo/method" event="onClick">
					new dijit.form.FilteringSelect({name: "color",
													required: true},
													dojo.byId("color"));
					new dijit.form.ValidationTextBox({name: "lastName",
													required: true},
													dojo.byId("lastName"));
					dojo.byId("newRow").style.display = "";
					dojo.byId("newRow2").style.display = "";
					this.attr("disabled", true);
					this.domNode.blur();
					// Call this, since we added a new widget - so that our
					// form knows that we have something else to watch.
					dijit.byId("form1").connectChildren();
				</script>
				Add More Fields
			</button>
		</form>
	</body>
</html>
